<template>
  <div class="app-container">
    <el-card>
      <main-header @reset="reset" @search="search" />
      <el-tabs v-model="activeName" type="card">
        <el-tab-pane label="列表信息展示" name="first">
          <list
            :results="results"
          />
        </el-tab-pane>
        <el-tab-pane label="趋势图展示" name="second">
          <div v-if="activeName === 'second' && trends.rows" class="trend-container">
            <ve-line :data="trends" :height="height" />
          </div>
          <div v-else class="trend-container empty-container">
            <el-empty description="暂无任何信息" />
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <el-dialog
      v-el-drag-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="60%"
    >
      <main-form
        :form-data="formData"
        @submit="submit"
      />
    </el-dialog>
  </div>
</template>

<script>
import elDragDialog from '@/directive/el-drag-dialog'
import MainHeader from './component/main-header'
import List from './component/list'
import MainForm from './component/main-form'
import CommonMixin from '@/mixin/CommonMixin'
import { getEtcs as getAll } from '@/api/mock'
export default {
  components: {
    MainHeader,
    List,
    MainForm
  },
  directives: { elDragDialog },
  mixins: [CommonMixin],
  data() {
    return {
      activeName: 'first',
      results: [],
      trends: {},
      height: 'calc(100vh - 224px)'
    }
  },
  methods: {
    getList() {
      getAll().then(res => {
        this.results = res.data.datas
        this.trends = res.data.trends
      })
    },
    submit(formData) {
      this.$message.success('成功')
    },
    getOne(row) {
      this.formData = row
      this.dialogVisible = true
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
